import { SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { TaskTable } from './TaskTable';
import { TaskSheetForm } from './TaskSheetForm';

export const TaskSheetContent = () => {
  return (
    <SheetContent className='lg:max-w-[75%]'>
      <SheetHeader>
        <SheetTitle>Тикет</SheetTitle>
        <SheetDescription>Информация тикета</SheetDescription>
      </SheetHeader>
      <div className='flex w-full gap-5'>
        <div className='flex h-[90vh] w-[40%] items-start'>
          <TaskSheetForm />
        </div>
        <div className='w-[60%] bg-slate-100  '>
          <TaskTable />
        </div>
      </div>
    </SheetContent>
  );
};

// <div className='grid grid-cols-4 items-center gap-4'>
//           <Label htmlFor='name' className='text-right'>
//             Name
//           </Label>
//           <Input
//             id='name'
//             value={name}
//             className='col-span-3'
//             onChange={(event) => setName(event.target.value)}
//           />
//         </div>
//         <div className='grid grid-cols-4 items-center gap-4'>
//           <Label htmlFor='username' className='text-right'>
//             Username
//           </Label>
//           <Input
//             id='username'
//             value={username}
//             className='col-span-3'
//             onChange={(event) => setUsername(event.target.value)}
//           />
//         </div>
